"use client";

import { api } from "@/convex/_generated/api";
import { cn } from "@/lib/utils";
import { useApiMutation } from "@/hooks/use-api-mutaion";
import { Plus } from "lucide-react";
import { toast } from "sonner";
import { useRouter } from "next/navigation";

interface NewBoardButtonProps {
  orgId: string;
  disbaled?: boolean;
}

export const NewBoardButton = ({ orgId, disbaled }: NewBoardButtonProps) => {
  const { mutate, pedding } = useApiMutation(api.board.create);
  const router = useRouter();

  const onClick = () => {
    mutate({
      orgId,
      title: "Untitled",
    })
      .then((id) => {
        // toast.success("创建成功");
        toast.success("创建成功");
        router.push(`/board/${id}`);
      })
      .catch(() => {
        toast.error("创建失败");
      });
  };

  return (
    <button
      disabled={pedding || disbaled}
      onClick={onClick}
      className={cn(
        "col-span-1 aspect-[100/167] bg-blue-600 rounded-lg hover:bg-blue-800 flex flex-col items-center justify-center py-6",
        (pedding || disbaled) &&
          "opacity-70 hover:bg-blue-600 cursor-not-allowed"
      )}
    >
      {/* stroke 定义描边宽度 */}
      <Plus className="h-12 w-12 text-white stroke-1"></Plus>
      <p className="text-white text-sm font-light">添加新的项目</p>
    </button>
  );
};
